<template>
	<div class="system-online-container layout-pd">
		<el-card shadow="hover">
			<div class="system-online-search mb15">
				<el-row :gutter="20">
					<el-col :span="24" v-auths="['monitor:online:query']">
						<el-input size="default" placeholder="用户名称查询" class="mt10" v-model="state.param.userName" clearable @keyup.enter.native="getTableData" />
						<el-input size="default" placeholder="登录地址查询" class="mt10" v-model="state.param.ipaddr"  clearable @keyup.enter.native="getTableData" />
						<el-button size="default" type="primary" :icon="'ele-Search'" class="mt10" @click="getTableData">
							查询
						</el-button>
						<el-button size="default" class="mt10" :icon="'ele-Refresh'" type="info" @click="resetParamData()">
							重置
						</el-button>
					</el-col>
				</el-row>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column label="会话编号" align="center" prop="tokenId" show-overflow-tooltip width="100" />
				<el-table-column label="登录名称" align="center" prop="userName" show-overflow-tooltip width="100" />
				<el-table-column label="所属部门" align="center" prop="deptName" show-overflow-tooltip width="100" />
				<el-table-column label="主机" align="center" prop="ipaddr" show-overflow-tooltip />
				<el-table-column label="登录地点" align="center" prop="loginLocation" show-overflow-tooltip />
				<el-table-column label="操作系统" align="center" prop="os" show-overflow-tooltip />
				<el-table-column label="浏览器" align="center" prop="browser" show-overflow-tooltip />
				<el-table-column label="登录时间" align="center" prop="loginTime">
					<template #default="scope">
						<span>{{ parseTime(scope.row.loginTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="90" fixed="right" v-auths="['monitor:online:batchLogout','monitor:online:forceLogout']">
					<template #default="scope">
						<el-button size="large" text type="primary" @click="handleForceLogout(scope.row)" v-auths="['monitor:online:batchLogout','monitor:online:forceLogout']"
							:icon="Delete">强退</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15 paginationFlex"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
				v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="state.total">
			</el-pagination>
		</el-card>

	</div>
</template>

<script setup lang="ts" name="systemOnline">
import { Delete } from '@element-plus/icons-vue'
import { reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useOnlineApi } from '/@/api/monitor/online';
import { parseTime } from '/@/utils/tool';

const state = reactive<TableType>({
	tableData: {
		data: [],
	},
	total: 0,
	loading: false,
	param: {
		pageNum: 1,
		pageSize: 10,
		userName: undefined,
		ipaddr: undefined,
	},
});

/**
 * 初始化表格数据
 * @returns
 */
const getTableData = async () => {
	state.tableData.loading = true;
	try {
		const res = await useOnlineApi().list(state.param);
		state.tableData.data = res.rows;
		state.total = res.total;
	} catch (error) {
		Promise.reject(error);
	}
	state.tableData.loading = false;
};

/**
 * 强退用户
 * @param row
 */
const handleForceLogout = (row: any) => {
	ElMessageBox.confirm('确定要强退该用户吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		useOnlineApi()
			.forceLogout(row.tokenId)
			.then(() => {
				ElMessage.success('操作成功');
				getTableData();
			});
	});
};


/**
 * 重置查询参数
 */
const resetParamData = () => {
	state.param = {
		pageNum: 1,
		pageSize: 10,
		onlineName: '',
		status: '',
	};
	getTableData();
};



// 分页改变
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getTableData();
};


// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style lang="scss" scoped>
.mt10 {
	max-width: 140px;
	margin: 10px 0 10px 10px;
}
</style>